onload = () => {
    loadCSS("../css/fontello.css", "bootstrap5-icon");
    loadCSS("../css/bootstrap5.min.css", "bootstrap5");
    loadScript("../js/bootstrap5.bundle.min.js").then(() => loadScript("../js/crud.js")).then(() => {
            let codeMapperOperator = new Crud({
                module: "codeMapper",
                hasCheckbox: true,
                conditionConverter: (item) => {
                    if (item.data.sourceCode)
                        item.data.sourceCode = item.data.sourceCode.split(/[,\t\n]+/).map(i => i.trim());
                    return item;
                },
                iterators:[{
                    name: "mapper.category",
                    iterator: [{"value": "warehouse", "caption": "Warehouse"},
                        {"value": "customer", "caption": "Customer"},
                        {"value": "internal_customer", "caption": "Internal Customer"},
                        {"value": "charge_code", "caption": "Charge Code"}
                    ]
                },{
                    name: "mapper.source",
                    iterator: [{"value": "3PL", "caption": "3PL"},{"value": "GPS", "caption": "GPS"}]
                },{
                    name: "mapper.target",
                    iterator: [{"value": "CW", "caption": "Cargowise"}]
                }],
                opsButton: ["new","export"],
                search:
                    [{"caption": "Category",  "name": "category", class: "col-3",iterator:"blank_ALL_mapper.category",type:"combo"},
                        {"caption": "Source System",  "name": "source", class: "col-3",iterator:"blank_ALL_mapper.source",type:"combo"},
                        {"caption": "Code", "type": "text", "name": "sourceCode", class: "col-3"},
                        {"caption": "Target System",  "name": "target", class: "col-3",iterator:"blank_ALL_mapper.target",type:"combo"},
                        {"caption": "Target Code", "type": "text", "name": "targetCode", class: "col-3"}
                    ],
                listField:
                    [{caption: "Category", "field": "category"},
                        {caption: "Source", "field": "source"},
                        {caption: "Source Code", "field": "sourceCode"},
                        {caption: "Target", "field": "target"},
                        {caption: "Target Code", "field": "targetCode"}],
                editFields:
                    [
                        {caption: "Category", "name": "category", "required": "required",iterator:"mapper.category",type:"combo",class:"col-12"},
                        {caption: "Source", "name": "source", "required": "required",iterator:"mapper.source",type:"combo",class:"col-6"},
                        {caption: "Source Code", "name": "sourceCode", "required": "required",class:"col-6"},
                        {caption: "Target", "name": "target", "required": "required",iterator:"mapper.target",type:"combo",class:"col-6"},
                        {caption: "Target Code", "name": "targetCode", "required": "required",class:"col-6"}
                    ]
            });
            codeMapperOperator.init()
        }
    ).catch((err) => console.error(err));
}
